﻿@using System.Linq;
@{
    ViewBag.Title = "Play";
    var artists = new List<SelectListItem>();
    foreach (var artist in ViewBag.Artists)
    {
        artists.Add(new SelectListItem() {
            Text = artist,
            Value = artist
        });
    }
    
    var albums = new List<SelectListItem>();
    foreach(var a in ViewBag.Albums)
    {
        albums.Add(new SelectListItem()
       {   Text = a.Title,
            Value = a.Title
        });
    }

    var categories = new List<SelectListItem>();
    foreach (var c in ViewBag.Categories)
    {
        categories.Add(new SelectListItem()
        {
            Text = c.ToString(),
            Value = c.ToString()
        });
    }

    //var attributes = new Dictionary<string, string>();
    //attributes.Add("id", "ddl_artist");
}



<script type="text/javascript">
    //debugger;
    $(document).ready(function () {

        jQuery.support.cors = true;
        var playList = [];

        var myPlaylist = new jPlayerPlaylist
        (
            {
                jPlayer: "#jquery_jplayer_N",
                cssSelectorAncestor: "#jp_container_N"
            },
            playList,
            {
                playlistOptions:
                {
                    enableRemoveControls: true,
                    autoPlay: true
                },
                swfPath: "js",
                supplied: "webmv, ogv, m4v, oga, mp3",
                errorAlerts: true,
                warningAlerts: true
            }
        );

        function addSongsByArtist(artist) {
            artist = encodeURIComponent(artist);
            //debugger;
            var request = $.ajax({
                type: 'GET',
                url: '/SongService/artist/?artist=' + artist,
                contentType: "application/json",
                error: onError,
                success: onSuccess
            });
        }


        function addSongsByAlbum(album) {
            //debugger;
            album = encodeURIComponent(album);
            var request = $.ajax({
                type: 'GET',
                url: '/SongService/album/?album=' + album,
                contentType: "application/json",
                error: onError,
                success: onSuccess
            });
        }

        function addSongsByCategory(category) {
            category = encodeURIComponent(category);
            var request = $.ajax({
                type: 'GET',
                url: '/SongService/category/?category=' + category,
                contentType: "application/json",
                error: onError,
                success: onSuccess
            });
        }

        function onError(data, status, err) {
            //debugger;
            alert("Data = " + JSON.stringify(data));
            alert("Status = " + status);
            alert("Error = " + err);
        }

        function onSuccess(songs) {
            //debugger;
            if (songs.length > 0) {
                myPlaylist.autoPlay = true;
                myPlaylist.setPlaylist(songs);
            }
        }

        //debugger;
        if (myPlaylist.playlist.length == 0) {
            var selectedAlbum = $('#Albums').val()
            addSongsByAlbum(selectedAlbum);
        }
        $('#Artists').change(function () {
            //debugger;
            var selectedArtist = $(this).val();
            addSongsByArtist(selectedArtist);
        });

        $('#Albums').change(function () {
            //debugger;
            var selectedAlbum = $(this).val();
            addSongsByAlbum(selectedAlbum);
        });

        $('#Categories').change(function () {
            //debugger;
            var selectedCategory = $(this).val();
            addSongsByCategory(selectedCategory);
        });


        // The shuffle commands

        $("#playlist-shuffle").click(function () {
            myPlaylist.shuffle();
        });

        $("#playlist-shuffle-false").click(function () {
            myPlaylist.shuffle(false);
        });
        $("#playlist-shuffle-true").click(function () {
            myPlaylist.shuffle(true);
        });

        // The select commands

        $("#playlist-select--2").click(function () {
            myPlaylist.select(-2);
        });
        $("#playlist-select--1").click(function () {
            myPlaylist.select(-1);
        });
        $("#playlist-select-0").click(function () {
            myPlaylist.select(0);
        });
        $("#playlist-select-1").click(function () {
            myPlaylist.select(1);
        });
        $("#playlist-select-2").click(function () {
            myPlaylist.select(2);
        });

        // The next/previous commands

        $("#playlist-next").click(function () {
            myPlaylist.next();
        });
        $("#playlist-previous").click(function () {
            myPlaylist.previous();
        });

        // The play commands

        $("#playlist-play").click(function () {
            //debugger;
            myPlaylist.play();
        });

        $("#playlist-play--2").click(function () {
            myPlaylist.play(-2);
        });
        $("#playlist-play--1").click(function () {
            myPlaylist.play(-1);
        });
        $("#playlist-play-0").click(function () {
            myPlaylist.play(0);
        });
        $("#playlist-play-1").click(function () {
            myPlaylist.play(1);
        });
        $("#playlist-play-2").click(function () {
            myPlaylist.play(2);
        });

        // The pause command

        $("#playlist-pause").click(function () {
            myPlaylist.pause();
        });

        // Changing the playlist options

        // Option: autoPlay

        $("#playlist-option-autoPlay-true").click(function () {
            myPlaylist.option("autoPlay", true);
        });
        $("#playlist-option-autoPlay-false").click(function () {
            myPlaylist.option("autoPlay", false);
        });

        // Option: enableRemoveControls

        $("#playlist-option-enableRemoveControls-true").click(function () {
            myPlaylist.option("enableRemoveControls", true);
        });
        $("#playlist-option-enableRemoveControls-false").click(function () {
            myPlaylist.option("enableRemoveControls", false);
        });

        // Option: displayTime

        $("#playlist-option-displayTime-0").click(function () {
            myPlaylist.option("displayTime", 0);
        });
        $("#playlist-option-displayTime-fast").click(function () {
            myPlaylist.option("displayTime", "fast");
        });
        $("#playlist-option-displayTime-slow").click(function () {
            myPlaylist.option("displayTime", "slow");
        });
        $("#playlist-option-displayTime-2000").click(function () {
            myPlaylist.option("displayTime", 2000);
        });

        // Option: addTime

        $("#playlist-option-addTime-0").click(function () {
            myPlaylist.option("addTime", 0);
        });
        $("#playlist-option-addTime-fast").click(function () {
            myPlaylist.option("addTime", "fast");
        });
        $("#playlist-option-addTime-slow").click(function () {
            myPlaylist.option("addTime", "slow");
        });
        $("#playlist-option-addTime-2000").click(function () {
            myPlaylist.option("addTime", 2000);
        });

        // Option: removeTime

        $("#playlist-option-removeTime-0").click(function () {
            myPlaylist.option("removeTime", 0);
        });
        $("#playlist-option-removeTime-fast").click(function () {
            myPlaylist.option("removeTime", "fast");
        });
        $("#playlist-option-removeTime-slow").click(function () {
            myPlaylist.option("removeTime", "slow");
        });
        $("#playlist-option-removeTime-2000").click(function () {
            myPlaylist.option("removeTime", 2000);
        });

        // Option: shuffleTime

        $("#playlist-option-shuffleTime-0").click(function () {
            myPlaylist.option("shuffleTime", 0);
        });
        $("#playlist-option-shuffleTime-fast").click(function () {
            myPlaylist.option("shuffleTime", "fast");
        });
        $("#playlist-option-shuffleTime-slow").click(function () {
            myPlaylist.option("shuffleTime", "slow");
        });
        $("#playlist-option-shuffleTime-2000").click(function () {
            myPlaylist.option("shuffleTime", 2000);
        });

        // Equivalent commands

        $("#playlist-equivalent-1-a").click(function () {
            myPlaylist.add({
                title: "Your Face",
                artist: "The Stark Palace",
                mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga: "http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
                poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
            }, true);
        });

        $("#playlist-equivalent-1-b").click(function () {
            myPlaylist.add({
                title: "Your Face",
                artist: "The Stark Palace",
                mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga: "http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
                poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
            });
            myPlaylist.play(-1);
        });

        // AVOID COMMANDS

        $("#playlist-avoid-1").click(function () {
            myPlaylist.remove(2); // Removes the 3rd item
            myPlaylist.remove(3); // Ignored unless removeTime=0: Where it removes the 4th item, which was originally the 5th item.
        });


    });
</script>

<h2>Listen to Mezmur</h2>
    <fieldset>
        <legend style="color: White">Select</legend>
        <table border=0  cellspacing="20">
          @*  <tr>
                <td>Search: </td>
                <td align="right">@Html.TextBox("Search")  <input type="submit" value="Search" /></td>
            </tr>*@
            <tr>
                <td>Albums(@ViewBag.Albums.Count): </td> 
                <td align="right">@Html.DropDownList("Albums", albums)</td>       
            </tr>
            <tr>
                <td>Zemarians (@ViewBag.Artists.Count): </td>
                <td align="right">@Html.DropDownList("Artists", artists)</td>
            </tr>    
            <tr>
                <td>Categories (@ViewBag.Categories.Count): </td>
                <td align="right">@Html.DropDownList("Categories", categories)</td>
            </tr>
        </table>
    </fieldset>
    <br />

    <div id="jp_container_N" class="jp-video jp-video-270p" style="float:left">
        <div class="jp-type-playlist">
            <div id="jquery_jplayer_N" class="jp-jplayer">
            </div>
            <div class="jp-gui">
                <div class="jp-video-play">
                    <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
                </div>
                <div class="jp-interface">
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar">
                            </div>
                        </div>
                    </div>
                    <div class="jp-current-time">
                    </div>
                    <div class="jp-duration">
                    </div>
                    <div class="jp-title">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                    <div class="jp-controls-holder">
                        <ul class="jp-controls">
                            <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max
                                volume</a></li>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value">
                            </div>
                        </div>
                        <ul class="jp-toggles">
                            <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full
                                screen</a></li>
                            <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">
                                restore screen</a></li>
                            <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                            <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle
                                off</a></li>
                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat
                                off</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="jp-playlist">
                <ul>
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                    <li></li>
                </ul>
            </div>
            <div class="jp-no-solution">
                <span>Update Required</span> To play the media you will need to either update your
                browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/"
                    target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>
    